<template>

  <el-header class="main-header" height="64px">
    <div class="header-content">
      <!-- 左侧Logo -->
      <div class="header-left">
        <router-link to="/" class="logo">
          <img src="/pic/video.svg" alt="logo" style="height: 36px">
        </router-link>
      </div>

      <!-- 居中搜索框 -->
      <div class="header-center">
        <el-input
            size="large"
            :modelValue="searchKey"
            @update:modelValue="emit('update:searchKey', $event)"
            placeholder="搜索视频"
            class="search-input"
            @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </div>



      <!-- 右侧功能区 -->

      <div class="header-right">
{{avatar.value}}
        <el-dropdown trigger="click">
          <el-avatar

              :size="36" :src=avatar />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToMePage">个人中心</el-dropdown-item>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-button link class="header-icon" type="primary">
          <el-icon :size="20"><VideoCamera /></el-icon>
         <router-link to="/upload"> <span>投稿</span></router-link>
        </el-button>

        <el-button link class="header-icon" type="primary">
          <el-icon :size="20"><Clock /></el-icon>
          <span>历史</span>
        </el-button>


      </div>
    </div>
  </el-header>
</template>

<script setup>
import {defineProps, defineEmits, ref, onMounted} from 'vue'
import { Search, VideoCamera, Clock } from '@element-plus/icons-vue'
import {logout} from "@/api/user.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";



// const userIdFromFullData = userData ? JSON.parse(userData).id : null;



const  avatar =ref('')


const props = defineProps({
  searchKey: String
})

const emit = defineEmits(['update:searchKey', 'search'])

const handleSearch = () => {
  emit('search')
}

const goToMePage = () => {
  const userId = localStorage.getItem('userId');
  if (userId) {
    router.push(`/me/${userId}`);
  } else {
    ElMessage.error('无法获取用户信息，请重新登录');
    router.push('/login');
  }
};


 async function  handleLogout(){
  const res = await logout()
   if (res.code === 200)
   {
     localStorage.removeItem('token')
     localStorage.removeItem('userId')
     localStorage.removeItem('user')



     await router.push('/login');
     return ElMessage.success(res.msg);
   }
   else {
     return ElMessage.error(res.msg)
   }

 }

 onMounted(()=>{
   const userData = localStorage.getItem('user');
   avatar.value =   JSON.parse(userData).avatar ;

 })
</script>

<style lang="scss" scoped>
.main-header {
  position: relative;
  border-bottom: 1px solid #e0e0e0;

  .header-content {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;

    .header-left,
    .header-right {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .header-center {
      flex: 1;
      display: flex;
      justify-content: center;
      padding: 0 20px;
    }

    .search-input {
      width: 100%;
      max-width: 450px;
    }

    .header-right {
      gap: 20px;

      .header-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 64px;
        padding: 0 10px;
        margin: 0;
        color: #61666D;

        span {
          font-size: 12px;
          margin-top: 4px;
        }

        &:hover {
          color: #00AEEC;
        }
      }
    }
  }
}
</style>
